<html>
<head>
<title>dya02-作业-学习热点App首页整体完完善.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #aa7dfc;}
.s2 { color: #faa23d;}
.s3 { color: #e2da90;}
.s4 { color: #bbb529;}
.s5 { color: #db7e9b;}
.s6 { color: #3d8c2b; font-weight: bold;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
dya02-作业-学习热点App首页整体完完善.ets</font>
</center></td></tr></table>
<pre><span class="s0">import List from </span><span class="s1">'@ohos.util.List'</span>

<span class="s0">interface List1 </span><span class="s2">{</span>
  <span class="s0">img</span><span class="s3">: </span><span class="s0">Resource</span><span class="s3">,</span>
  <span class="s0">text</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">createTime</span><span class="s3">?:</span><span class="s0">string</span>
<span class="s2">}</span>

<span class="s4">@</span><span class="s0">Entry</span>
<span class="s4">@</span><span class="s0">Component</span>
<span class="s0">struct Index </span><span class="s2">{</span>
  <span class="s4">@</span><span class="s0">State list1</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">[] </span><span class="s3">= </span><span class="s5">[</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_1'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'内容精选' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_2'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'学堂' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_3'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'鸿蒙开发者社区' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_4'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'博客' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_5'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'企业培训' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_6'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'Next训练营' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.ic_01_7'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'精培' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s5">]</span>
  <span class="s4">@</span><span class="s0">State list2</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">[] </span><span class="s3">= </span><span class="s5">[</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.banner_01_1'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'谷歌杀入开源大模型凭什么问鼎王座？' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.banner_01_2'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'微软牵手OpenAl劲敌！Mistral顶级大模型不...' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.banner_01_3'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'生成式AI会扼杀DevSecOps吗' </span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{ </span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.banner_01_4'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'微软继续Linux化！sudo原生命令强势登录...' </span><span class="s2">}</span><span class="s3">,</span>
  <span class="s5">]</span>
  <span class="s6">//热门推荐内容</span>
  <span class="s4">@</span><span class="s0">State recommendList</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">[] </span><span class="s3">= </span><span class="s5">[</span>
    <span class="s2">{</span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.list_02_1'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'字节一面：TCP和UDP可以使用同一个端口号吗？'</span><span class="s3">, </span><span class="s0">createTime</span><span class="s3">: </span><span class="s1">'2024-03-05 10:07:22'</span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.list_02_2'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'NoSQL：在高并发场景下，数据库和NoSQL如何做到互补？'</span><span class="s3">, </span><span class="s0">createTime</span><span class="s3">: </span><span class="s1">'2024-03-05 10:03:17'</span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.list_02_3'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'处理大规模并发请求时如何设计和优化Python后端服务的架构和性能'</span><span class="s3">, </span><span class="s0">createTime</span><span class="s3">: </span><span class="s1">'2024-03-05 10:03:09'</span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.list_02_4'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'C++右值引用：解锁高效内存管理与性能优化的奥秘'</span><span class="s3">, </span><span class="s0">createTime</span><span class="s3">: </span><span class="s1">'2024-03-05 09:55:00'</span><span class="s2">}</span><span class="s3">,</span>
    <span class="s2">{</span><span class="s0">img</span><span class="s3">: </span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.list_02_5'</span><span class="s5">)</span><span class="s3">, </span><span class="s0">text</span><span class="s3">: </span><span class="s1">'现代分布式系统架构的权衡分析'</span><span class="s3">, </span><span class="s0">createTime</span><span class="s3">: </span><span class="s1">'2024-03-05 09:52:57'</span><span class="s2">}</span><span class="s3">,</span>
  <span class="s5">]</span>
  <span class="s4">@</span><span class="s0">Builder</span>
  <span class="s0">TabbarPrams</span><span class="s5">(</span><span class="s0">text</span><span class="s3">:</span><span class="s0">string</span><span class="s3">,</span><span class="s0">index</span><span class="s3">:</span><span class="s0">number</span><span class="s5">)</span><span class="s2">{</span>
    <span class="s0">if </span><span class="s5">(</span><span class="s0">index </span><span class="s3">== </span><span class="s7">2</span><span class="s5">)</span><span class="s2">{</span>
      <span class="s0">Badge</span><span class="s5">(</span><span class="s2">{</span><span class="s0">count</span><span class="s3">:</span><span class="s7">9</span><span class="s3">,</span><span class="s0">style</span><span class="s3">:</span><span class="s2">{}</span><span class="s3">,</span><span class="s0">position</span><span class="s3">:</span><span class="s2">{</span><span class="s0">y</span><span class="s3">:-</span><span class="s7">8</span><span class="s3">,</span><span class="s0">x</span><span class="s3">:</span><span class="s7">25</span><span class="s2">}}</span><span class="s5">)</span><span class="s2">{</span>
        <span class="s0">Text</span><span class="s5">(</span><span class="s0">text</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s7">18</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">selectedIndex </span><span class="s3">== </span><span class="s0">index </span><span class="s3">? </span><span class="s1">'#111111' </span><span class="s3">: </span><span class="s1">'#A2A0A0'</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s7">700</span><span class="s5">)</span>
      <span class="s2">}</span>
    <span class="s2">}</span><span class="s0">else </span><span class="s2">{</span>
      <span class="s0">Text</span><span class="s5">(</span><span class="s0">text</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">selectedIndex </span><span class="s3">== </span><span class="s0">index </span><span class="s3">? </span><span class="s1">'#111111' </span><span class="s3">: </span><span class="s1">'#A2A0A0'</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s7">700</span><span class="s5">)</span>
    <span class="s2">}</span>

  <span class="s2">}</span>
  <span class="s4">@</span><span class="s0">State selectedIndex</span><span class="s3">:</span><span class="s0">number </span><span class="s3">= </span><span class="s7">0</span>
  <span class="s6">// @Builder</span>
  <span class="s6">// TabbarPrams1(text1:string){</span>
  <span class="s6">//   Badge({count:9,style:{}}){</span>
  <span class="s6">//     Text(text1)</span>
  <span class="s6">//   }</span>
  <span class="s6">// }</span>

  <span class="s6">//创建控制器</span>
  <span class="s0">myscroll </span><span class="s3">= </span><span class="s0">new Scroller</span><span class="s5">()</span>
  <span class="s0">build</span><span class="s5">() </span><span class="s2">{</span>
    <span class="s0">Tabs</span><span class="s5">()</span><span class="s2">{</span>
      <span class="s0">TabContent</span><span class="s5">()</span><span class="s2">{</span>
        <span class="s0">Column</span><span class="s5">() </span><span class="s2">{</span>
          <span class="s0">Row</span><span class="s5">() </span><span class="s2">{</span>
            <span class="s0">Image</span><span class="s5">(</span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.hot_01'</span><span class="s5">))</span>
              <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">60</span><span class="s5">)</span>
            <span class="s0">Row</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s7">15 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
              <span class="s0">Image</span><span class="s5">(</span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.user_01'</span><span class="s5">))</span>
                <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">20</span><span class="s5">)</span>
              <span class="s0">Image</span><span class="s5">(</span><span class="s0">$r</span><span class="s5">(</span><span class="s1">'app.media.more_01'</span><span class="s5">))</span>
                <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">20</span><span class="s5">)</span>
            <span class="s2">}</span>
          <span class="s2">}</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">justifyContent</span><span class="s5">(</span><span class="s0">FlexAlign</span><span class="s3">.</span><span class="s0">SpaceBetween</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">28</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">16 </span><span class="s2">}</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">56</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">onClick</span><span class="s5">(()</span><span class="s3">=&gt;</span><span class="s2">{</span>
            <span class="s0">this</span><span class="s3">.</span><span class="s0">myscroll</span><span class="s3">.</span><span class="s0">scrollEdge</span><span class="s5">(</span><span class="s0">Edge</span><span class="s3">.</span><span class="s0">Top</span><span class="s5">)</span>
          <span class="s2">}</span><span class="s5">)</span>

          <span class="s0">Scroll</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">myscroll</span><span class="s5">) </span><span class="s2">{</span>
          <span class="s0">Column</span><span class="s5">() </span><span class="s2">{</span>
            <span class="s0">Column</span><span class="s5">() </span><span class="s2">{</span>
              <span class="s0">Swiper</span><span class="s5">() </span><span class="s2">{</span>
                <span class="s0">ForEach</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">list2</span><span class="s3">, </span><span class="s5">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                  <span class="s0">Column</span><span class="s5">() </span><span class="s2">{</span>
                    <span class="s0">Image</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">img</span><span class="s5">)</span>
                    <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">text</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">position</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">30 </span><span class="s2">}</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s7">700</span><span class="s5">)</span>
                  <span class="s2">}</span>
                <span class="s2">}</span><span class="s5">)</span>
                <span class="s6">// ForEach(this.text, (item: string) =&gt; {</span>
                <span class="s6">//   Text(item)</span>
                <span class="s6">//     .fontColor(Color.White)</span>
                <span class="s6">//     .position({ left: 10, bottom: 30 })</span>
                <span class="s6">//     .fontWeight(700)</span>
                <span class="s6">// })</span>
              <span class="s2">}</span>
              <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">300</span><span class="s5">)</span>
              <span class="s3">.</span><span class="s0">indicator</span><span class="s5">(</span>
                <span class="s0">Indicator</span><span class="s3">.</span><span class="s0">dot</span><span class="s5">()</span>
                  <span class="s3">.</span><span class="s0">itemWidth</span><span class="s5">(</span><span class="s7">30</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">itemHeight</span><span class="s5">(</span><span class="s7">5</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">color</span><span class="s5">(</span><span class="s1">'#ccc'</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">selectedItemWidth</span><span class="s5">(</span><span class="s7">30</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">selectedItemHeight</span><span class="s5">(</span><span class="s7">5</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">selectedColor</span><span class="s5">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">left</span><span class="s5">(</span><span class="s7">0</span><span class="s5">)</span>
              <span class="s5">)</span>
            <span class="s2">}</span>

            <span class="s0">Grid</span><span class="s5">() </span><span class="s2">{</span>
              <span class="s0">ForEach</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">list1</span><span class="s3">, </span><span class="s5">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                <span class="s0">GridItem</span><span class="s5">() </span><span class="s2">{</span>
                  <span class="s0">Column</span><span class="s5">() </span><span class="s2">{</span>
                    <span class="s0">Image</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">img</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">40</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">aspectRatio</span><span class="s5">(</span><span class="s7">1</span><span class="s5">)</span>
                    <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">text</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s7">14</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s1">'#666666'</span><span class="s5">)</span>
                  <span class="s2">}</span>
                <span class="s2">}</span>
                <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">65</span><span class="s5">)</span>
              <span class="s2">}</span><span class="s5">)</span>
            <span class="s2">}</span>
            <span class="s3">.</span><span class="s0">scrollBar</span><span class="s5">(</span><span class="s0">BarState</span><span class="s3">.</span><span class="s0">Off</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">rowsTemplate</span><span class="s5">(</span><span class="s1">'1fr'</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">100</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">columnsGap</span><span class="s5">(</span><span class="s7">24</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">12</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">12 </span><span class="s2">}</span><span class="s5">)</span>

            <span class="s6">//热门推荐滚动</span>
            <span class="s0">Column</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
              <span class="s0">Text</span><span class="s5">(</span><span class="s1">'热门推荐'</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s7">20</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s7">700</span><span class="s5">)</span>
              <span class="s0">ForEach</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">recommendList</span><span class="s3">, </span><span class="s5">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">List1</span><span class="s5">) </span><span class="s3">=&gt; </span><span class="s2">{</span>
                <span class="s0">Row</span><span class="s5">() </span><span class="s2">{</span>
                  <span class="s0">Image</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">img</span><span class="s5">)</span>
                    <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">100</span><span class="s5">)</span>
                    <span class="s3">.</span><span class="s0">borderRadius</span><span class="s5">(</span><span class="s7">10</span><span class="s5">)</span>
                  <span class="s0">Column</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s7">40 </span><span class="s2">}</span><span class="s5">) </span><span class="s2">{</span>
                    <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">text</span><span class="s5">)</span>
                      <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s7">14</span><span class="s5">)</span>
                    <span class="s0">Text</span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">createTime</span><span class="s5">)</span>
                  <span class="s2">}</span>
                  <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s5">(</span><span class="s7">1</span><span class="s5">)</span>
                  <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
                <span class="s2">}</span>
                <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">height</span><span class="s5">(</span><span class="s7">130</span><span class="s5">)</span>
                <span class="s3">.</span><span class="s0">border</span><span class="s5">(</span><span class="s2">{</span>
                  <span class="s0">width</span><span class="s3">: </span><span class="s2">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">1 </span><span class="s2">}</span><span class="s3">,</span>
                  <span class="s0">color</span><span class="s3">: </span><span class="s1">'#ffdedcdc'</span>
                <span class="s2">}</span><span class="s5">)</span>
              <span class="s2">}</span><span class="s5">)</span>

            <span class="s2">}</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">alignItems</span><span class="s5">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s2">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">10 </span><span class="s2">}</span><span class="s5">)</span>
          <span class="s2">}</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s5">(</span><span class="s7">1</span><span class="s5">)</span>
        <span class="s2">}</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s1">'100%'</span><span class="s5">)</span>
      <span class="s2">}</span><span class="s3">.</span><span class="s0">tabBar</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">TabbarPrams</span><span class="s5">(</span><span class="s1">'首页'</span><span class="s3">,</span><span class="s7">0</span><span class="s5">))</span>

      <span class="s0">TabContent</span><span class="s5">()</span><span class="s2">{</span>

      <span class="s2">}</span><span class="s3">.</span><span class="s0">tabBar</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">TabbarPrams</span><span class="s5">(</span><span class="s1">'视频'</span><span class="s3">,</span><span class="s7">1</span><span class="s5">))</span>
        <span class="s0">TabContent</span><span class="s5">()</span><span class="s2">{</span>
        <span class="s2">}</span><span class="s3">.</span><span class="s0">tabBar</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">TabbarPrams</span><span class="s5">(</span><span class="s1">'消息'</span><span class="s3">,</span><span class="s7">2</span><span class="s5">))</span>
      <span class="s0">TabContent</span><span class="s5">()</span><span class="s2">{</span>

      <span class="s2">}</span><span class="s3">.</span><span class="s0">tabBar</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">TabbarPrams</span><span class="s5">(</span><span class="s1">'我的'</span><span class="s3">,</span><span class="s7">3</span><span class="s5">))</span>
    <span class="s2">}</span>
    <span class="s3">.</span><span class="s0">onChange</span><span class="s5">((</span><span class="s0">index</span><span class="s5">)</span><span class="s3">=&gt;</span><span class="s2">{</span>
      <span class="s0">this</span><span class="s3">.</span><span class="s0">selectedIndex </span><span class="s3">= </span><span class="s0">index</span>
    <span class="s2">}</span><span class="s5">)</span>
    <span class="s3">.</span><span class="s0">barPosition</span><span class="s5">(</span><span class="s0">BarPosition</span><span class="s3">.</span><span class="s0">End</span><span class="s5">)</span>
  <span class="s2">}</span>
<span class="s2">}</span></pre>
</body>
</html>